<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模式选择</title>
    <script src="js/jquery-1.12.0.min.js"></script>
    <style>
        html{
            width: 100%;
            height: 100%;
            min-height: 483px;
            min-width: 890px;
            padding: 0px;
        }
        body {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }
        .outbox{
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background-image: url("imgs/patternchoose.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }
        .outbox::before{
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            width: 0px;
            content: '';
        }
    </style>
</head>
<body>
</body>
<script>
    function ModeSelect(){
        var self = this;
        //外面盒子相当于body
        self.$outbox = $("<div></div>");
        self.$outbox.css({
            margin: "0 auto",
            width: "100%",
            height: "100%",
            "background-image": "url(imgs/patternchoose.jpg)",
            "background-position": "center",
            "background-size": "cover",
            "background-repeat": "no-repeat",
            position: "relative"
        });
        //帮助按钮
        var $help = $("<div></div>");
        $help.css({
            position: "absolute",
            top: "5%",
            left:"180px",
            cursor: "pointer",
            width:"95px",
            height:"95px",
            "background-image":"url(imgs/help.png)"
        });
        $help.appendTo(self.$outbox);
        //返回按钮
        var $return = $("<div id='return'></div>");
        $return.css({
            position: "absolute",
            top: "5%",
            right:"100px",
            cursor: "pointer",
            width:"95px",
            height:"95px",
            "background-image":"url(imgs/return.png)"
        });
        $return.appendTo(self.$outbox);
        //点击返回按钮跳转到登录界面
        $return.click(function(){
            director.runSence(new LoginSence());
        });
        var $rider = $("<div></div>");
        $rider.css({
            position: "absolute",
            top: "15%",
            left:"180px",
            cursor: "pointer",
            width:"284px",
            height:"383px",
            "background-image":"url(imgs/rider1.png)"
        });
        $rider.appendTo(self.$outbox);
        var $moto = $("<div></div>");
        $moto.css({
            position: "absolute",
            top: "44%",
            left:"40%",
            cursor: "pointer",
            width:"365px",
            height:"236px",
            "background-image":"url(imgs/moto1.png)"
        });
        $moto.appendTo(self.$outbox);
        //单人游戏按钮
        var $single = $("<div></div>");
        $single.css({
            width:"263px",
            height:"69px",
            position:"absolute",
            bottom:"5%",
            left:"20%",
            "background-image": "url(imgs/singleplayer.png)",
            cursor:"pointer"
        });
        $single.appendTo(self.$outbox);
        //点击单人游戏进入地图选择界面
        $single.click(function(){
           director.runSence(new MapBanner());
        });
        //个人车库按钮
        var $persongarage = $single.clone();
        $persongarage.css({
            "background-image": "url(imgs/shop/mygarage.png)",left:"43%","background-size":"263px 69px"
        });
        $persongarage.appendTo(self.$outbox);
        //点击个人车库按钮进入个人车库界面
        $persongarage.click(function(){
            director.runSence(new GarageSence());
        })
//        var $pergaragetext =$("<span></span>");
//        $pergaragetext.css({
//            width:"128px", height:'35px',
//            "font-size":"32px","font-family":"微软雅黑","text-align":"center","text-fill-color":"#fef93c","text-strock-color":"black",
//            "text-stroke-width":"2px","font-weight":"bolder",left:"67px",position:"absolute",top:"10px"
//            "background-image": "url(imgs/mygarage.png)"
//        });
//        $pergaragetext.html("个人仓库");
//        $pergaragetext.appendTo($persongarage);
        //商店按钮
        var $shop = $single.clone();
        $shop.css({
            "background-image": "url(imgs/pattenChshop.png)",left:"65%"
        });
        $shop.appendTo(self.$outbox);

    }
    $(function(){
        var mode = new ModeSelect($("body"));
    })
</script>
</html>